<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="消息"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <div class="settingbox">
        <div class="setting" @click="SystemNotificationFn">
          <img src="../../lib/img/my_news/xiaoxi@2x.png" alt="">
          <span>系统通知</span>
          <van-icon name="arrow" />
        </div>
        <div class="setting" @click="commentFn">
          <img src="../../lib/img/my_news/pinflun@2x.png" alt="">
          <span>评论</span>
          <van-icon name="arrow" />
        </div>
        <div class="setting" @click="NewlyAddedFn">
          <img src="../../lib/img/my_news/xinzeng@2x.png" alt="">
          <span>新增关注</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Icon } from 'vant'
Vue.use(NavBar)
Vue.use(Icon)
export default {
  // 设置data初始值
  data () {
    return {}
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 系统通知
    SystemNotificationFn () {
      // console.log('系统通知')
      this.$router.push('/my_news/SystemNotifictionFn')
    },
    // 评论
    commentFn () {
      // console.log('评论')
      this.$router.push('/my_news/comment')
    },
    // 新增关注
    NewlyAddedFn () {
      // console.log('新增关注')
      this.$router.push('/my_news/NewlyAdded')
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    .settingbox {
      width: 100%;
      height: 100%;
      background-color: #f7f7f7;
      // 每一个单元格
      .setting {
        width: 100%;
        height: .49rem;
        background-color: #ffffff;
        line-height: .49rem;
        padding: 0 .16rem;
        font-size: .16rem;
        img {
          height: .25rem;
          width: .25rem;
        }
        span {
          margin-left: .10rem;
        }
        /deep/ .van-icon {
          float: right;
          color: #e1e1e1;
          font-size: .18rem;
          line-height: .49rem;
        }
      }
    }
  }
</style>
